<template>
	<view class="p-2 bg-white">
		<view class="py-2 pl-20 position-relative line-h">
			<view class="position-absolute font-md" style="top:40upx;left:20upx;">
			<text class="text-danger">*</text>部件：
			</view>
			<search-picker :range="allMaterialParts" 
			placeholder="请选择部件" leftValue="name" rightValue="code" 
			@selectItem="selectItem"  v-model="formData.wechatMaterialName" @getSearchAll="getSearchAll"></search-picker>
		</view>
		<view class="py-2 pl-20 position-relative line-h ">
			<view class="position-absolute font-md" style="top:40upx;left:20upx;">
			<text class="text-danger">*</text>部件批号：
			</view>
			<input class="border p-2 w-100 d-block line-h border-box input-defind rounded"
			 :class="focusClass.batch ? 'input-border-color' : ''"
			placeholder-class="text-light-muted" @focus="focus('batch')" @blur="blur('batch')"
			placeholder="请输入部件批号"
			v-model="formData.batch"/>
		</view>
		
		<view class="py-2 pl-20 position-relative line-h ">
			<view class="position-absolute font-md" style="top:40upx;left:20upx;">
			<text class="text-danger">*</text>部件编码：
			</view>
			<input class="border p-2 w-100 d-block line-h border-box input-defind rounded"
			 :class="focusClass.code ? 'input-border-color' : ''"
			placeholder-class="text-light-muted" @focus="focus('code')" @blur="blur('code')"
			placeholder="请输入部件编码"
			v-model="formData.code"/>
		</view>
		
		<view class="main-bg-color text-white rounded mt-4 font-md text-center py-2" hover-class="main-bg-hover-color" @click="submit">
			提交
		</view>
	</view>
</template>

<script>
	import searchPicker from '@/components/searchPicker/searchPicker.vue'
	import api from '@/common/api/api.js'
	export default {
		components:{
			searchPicker
		},
		data() {
			return {
				themeColor: '#ec4d49',
				id: '',
				repairType: '',
				type: '',
				allMaterialParts: [],
				formData: {
				    wechatMaterialName: '',
				    parts: '',
				    batch: '',
				    code:''
				},
				focusClass:{
					wechatMaterialName:false,
					batch:false,
					code:false
				}
			}
		},
		onLoad(e){
			this.id=e.id;
			this.repairType = e.repairType;
		},
		methods: {
			focus(e,key){
				this.focusClass[key] = true
			},
			blur(e,key){
				this.focusClass[key] = false
			},
			selectItem(e){
				this.formData.wechatMaterialName = e.name;
				this.formData.parts=e.id
			},
			getSearchAll(e){
				this.getAllMaterialParts({keywords:this.formData.wechatMaterialName})
			},
			/**获取所有部件类型*/
			getAllMaterialParts(data) {
				let self = this;
				self.$H.get(api.jqbzAll,data).then(res=>{
					self.allMaterialParts=res.content;
				})
			},
			submit(){
				let self = this;
				if(self.formData.wechatMaterialName===""){
					uni.showToast({
						title:'请选择部件'
					})
					return
				}
				let postData={
					pid:self.id,
					batch:self.formData.batch,
					code:self.formData.code,
					parts:self.formData.parts
				}
				switch (self.repairType){
				    case 'self':
				          postData.type=1;
				    break;
				    case 'send':
				         postData.type = 2;
				    break;
				    case 'maintain':
				          postData.type = 3;
				    break
				}
				uni.showLoading({
					title:'数据提交中'
				})
				this.$H.post(api.insertUninstallMaterial,postData).then(res=>{
					uni.showToast({
						title:'提交成功'
					})
					uni.navigateBack()
				})
			}
		}
	}
</script>

<style>

</style>
